<!-- src/views/user/Register.vue -->
<template>
    <n-message-provider > 
  <div class="register-container">
    <div class="register-card">
      <h2 class="register-title">用户注册</h2>
      <n-form 
        ref="formRef" 
        :model="registerForm" 
        :rules="rules"
        @submit.prevent="handleRegister"
      >
        <n-form-item label="用户名" path="username">
          <n-input 
            v-model:value="registerForm.username" 
            placeholder="请输入用户名"
            @keydown.enter="handleRegister"
          />
        </n-form-item>
        
        <n-form-item label="密码" path="password">
          <n-input 
            v-model:value="registerForm.password" 
            type="password"
            placeholder="请输入密码"
            @keydown.enter="handleRegister"
          />
        </n-form-item>
        
        <n-form-item label="确认密码" path="confirmPassword">
          <n-input 
            v-model:value="registerForm.confirmPassword" 
            type="password"
            placeholder="请再次输入密码"
            @keydown.enter="handleRegister"
          />
        </n-form-item>
        
        <n-form-item>
          <n-button 
            type="primary" 
            @click="handleRegister" 
            :loading="loading"
            block
          >
            注册
          </n-button>
        </n-form-item>
      </n-form>
      
      <div class="login-link">
        已有账户？<n-button type="primary" text @click="goToLogin">立即登录</n-button>
      </div>
    </div>
  </div>
  </n-message-provider>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import type { FormInst, FormRules } from 'naive-ui'
import apiClient from '../../utils/appHttp';


const router = useRouter()
const message = useMessage()
const formRef = ref<FormInst | null>(null)
const loading = ref(false)

// 注册表单数据
const registerForm = reactive({
  username: '',
  password: '',
  confirmPassword: ''
})

// 表单验证规则
const rules: FormRules = {
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    },
    {
      min: 3,
      max: 20,
      message: '用户名长度应在3-20个字符之间',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      min: 6,
      max: 20,
      message: '密码长度应在6-20个字符之间',
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    {
      required: true,
      message: '请确认密码',
      trigger: 'blur'
    },
    {
      validator: (_, value) => {
        if (value !== registerForm.password) {
          return new Error('两次输入的密码不一致')
        }
        return true
      },
      trigger: 'blur'
    }
  ]
}

// 处理注册
const handleRegister = (e: Event) => {
  e.preventDefault()
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      loading.value = true
      try {
        // 发送注册请求
        const response = await apiClient.post('/auth', {
          action:'register',
          username: registerForm.username,
          password: registerForm.password
        })
        if(response.data.code!=0) {
           message.error('注册失败:'+response.data.message)
          return;
        }
        message.success('注册成功')
        // 注册成功后跳转到登录页面
        router.push('/login')
      } catch (error: any) {
        message.error(error.message || '注册失败')
      } finally {
        loading.value = false
      }
    } else {
      message.error('请检查表单填写是否正确')
    }
  })
}

// 跳转到登录页面
const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.register-card {
  width: 400px;
  padding: 32px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.register-title {
  text-align: center;
  margin-bottom: 24px;
  color: #333;
}

.login-link {
  text-align: center;
  margin-top: 16px;
  color: #666;
}
</style>